<template>
  <div id="globalSider">
    <!-- 侧边栏 -->
    <a-layout-sider
      v-if="loginUserStore.loginUser.id"
      class="sider"
      v-model:collapsed="collapsed"
      :width="180"
      :collapsed-width="80"
      collapsible
    >
      <a-menu
        mode="inline"
        v-model:selectedKeys="current"
        :items="menuItems"
        @click="doMenuClick"
      />
    </a-layout-sider>

    <!-- 折叠按钮 -->
    <div class="toggle-btn" @click="toggleSider">
      <span v-if="collapsed">➡️</span>
      <span v-else>⬅️</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, h, ref, watchEffect } from 'vue'
import {
  PictureOutlined,
  CloudOutlined,
  TeamOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined
} from '@ant-design/icons-vue'; // 新增折叠图标[6,8](@ref)
import { useRouter } from 'vue-router'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
import { SPACE_TYPE_ENUM } from '@/constants/space.ts'
import { listMyTeamSpaceUsingPost } from '@/api/spaceUserController.ts'
import { message } from 'ant-design-vue'

const loginUserStore = useLoginUserStore()

// 团队空间图标统一配置
const TEAM_ICON = () => h(TeamOutlined) // 复用团队图标组件[1](@ref)

const fixedMenuItems = [
  {
    key: '/',
    label: '公共图库',
    icon: () => h(PictureOutlined),
  },
  {
    key: '/my_space',
    label: '我的空间',
    icon: () => h(CloudOutlined),
  },
  {
    key: `/add_space?type=${SPACE_TYPE_ENUM.TEAM}`,
    label: '创建团队',
    icon: TEAM_ICON, // 保持创建团队图标一致
  }
];

const teamSpaceList = ref<API.SpaceUserVO[]>([])
const menuItems = computed(() => {
  // 没有团队空间，只展示固定菜单
  if (teamSpaceList.value.length < 1) {
    return fixedMenuItems;
  }
  // 团队空间菜单生成逻辑优化
  const teamSpaceSubMenus = computed(() =>
    teamSpaceList.value.map((spaceUser) => ({
      key: `/space/${spaceUser.spaceId}`,
      label: spaceUser.space?.spaceName,
      icon: TEAM_ICON, // 为每个团队项添加统一图标[5](@ref)
      class: 'team-submenu' // 添加特殊class用于样式覆盖
    }))
  );
  const teamSpaceMenuGroup = {
    type: 'group',
    label: '我的团队',
    key: 'teamSpace',
    children: teamSpaceSubMenus,
  }
  return [
    ...fixedMenuItems,
    {
      type: 'group',
      label: '我的团队',
      key: 'teamSpace',
      class: 'team-group', // 添加分组class
      children: teamSpaceSubMenus.value
    }
  ]
})

// 加载团队空间列表
const fetchTeamSpaceList = async () => {
  const res = await listMyTeamSpaceUsingPost()
  if (res.data.code === 0 && res.data.data) {
    teamSpaceList.value = res.data.data
  } else {
    message.error('加载我的团队空间失败，' + res.data.message)
  }
}

/**
 * 监听变量，改变时触发数据的重新加载
 */
watchEffect(() => {
  // 登录才加载
  if (loginUserStore.loginUser.id) {
    fetchTeamSpaceList()
  }
})


const router = useRouter()
const current = ref<string[]>([])
const collapsed = ref(true) // 侧边栏折叠状态

// 监听路由变化，更新选中菜单
router.afterEach((to) => {
  current.value = [to.path]
})

// 处理菜单点击事件
// 路由跳转事件
const doMenuClick = ({ key }: { key: string }) => {
  router.push(key)
}

// 折叠/展开侧边栏
const toggleSider = () => {
  collapsed.value = !collapsed.value
}
</script>

<style scoped>
/* 图标统一样式 */
:deep(.ant-menu-item .anticon),
:deep(.team-submenu .anticon) {
  font-size: 14px !important;
  margin-right: 8px !important;
  transition: color 0.3s;
}

/* 分组标题对齐优化 */
:deep(.team-group .ant-menu-item-group-title) {
  padding-left: 24px !important;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}

/* 子菜单项对齐 */
:deep(.team-submenu) {
  padding-left: 24px !important;
}

/* 折叠按钮使用Ant Design图标 */
.toggle-btn :deep(svg) {
  font-size: 14px;
  vertical-align: -0.15em;
}

/* 选中状态继承颜色 */
:deep(.ant-menu-item-selected .anticon) {
  color: inherit !important;
}
/* 整体布局 */
#globalSider {
  display: flex;
  position: relative;
}

/* 侧边栏样式 */
.sider {
  background: #ffffff !important; /* 纯白色背景 */
  padding-top: 20px;
  transition: width 0.3s ease-in-out;
  min-height: 100vh;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); /* 轻微阴影，增强层次感 */
}

/* 折叠按钮 */
.toggle-btn {
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: #f0f0f0;
  color: #666;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-btn:hover {
  background: #e0e0e0;
}

/* 菜单整体去除边框 */
:deep(.ant-menu) {
  background: transparent !important;
  border-inline-end: none !important;
}

/* 菜单项样式 */
:deep(.ant-menu-item) {
  color: #333 !important; /* 默认深灰色 */
  transition: all 0.3s ease;
}

/* 鼠标悬浮效果 */
:deep(.ant-menu-item:hover) {
  background: rgba(52, 152, 219, 0.1) !important;
  color: #3498db !important;
}

/* 选中菜单项 */
:deep(.ant-menu-item-selected) {
  background: #3498db !important; /* 选中时高亮蓝色 */
  color: white !important;
}

/* 侧边栏样式 */
.sider {
  background: #ffffff !important;
  padding-top: 20px;
  transition: width 0.3s ease-in-out;
  min-height: 100vh;
  box-shadow: 1px 0 5px rgba(0, 0, 0, 0.08); /* 减少阴影，使其更简洁 */
}

/* 折叠按钮优化 */
.toggle-btn {
  position: absolute;
  right: -16px; /* 让它更贴边 */
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: #f0f0f0;
  color: #666;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-btn:hover {
  background: #e0e0e0;
}

</style>
